const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const loadUse = (loader) => {
  const arr =  [ // 解析器解析规则 ---- 从后到前
    { loader: MiniCssExtractPlugin.loader },
    { loader: 'css-loader' },
    { loader: loader }
  ]
  if (!loader) {
    arr.pop()
  }
  return arr
}
module.exports = { // webpack 基于 nodejs 
  mode: 'development', // production --- 默认为 production
  // entry: "./src/index.js" // 未指明打包出来的文件的名称
  // entry: ['./src/index.js'] // 未指明打包出来的文件的名称
  entry: {
    // 针对项目根目录的路径
    app: './src/index.js' // 指明打包出来的文件的名称为  app.js
  },
  output: {
    // 针对 webpack.config.js 所在的目录
    // path.resolve
    path: path.resolve(__dirname, '../', 'build'), // 指明打包出来的文件夹为build
    filename: '[name].[hash:8].js' // app.h222222.js
  },
  plugins: [
    new webpack.ProgressPlugin(), // 显示打包进度
    new CleanWebpackPlugin(), // 每次打包时清除上一次打包的结果
    // 拷贝文件
    new CopyWebpackPlugin({ // 克隆 src/assets 文件夹至输出目录下的 static 文件夹
      patterns: [
        {
          from: './src/assets',
          to: 'static'
        },
        {
          from: './public/favicon.ico',
          to: ''
        }
      ]
    }),
    // 压缩css文件 ---- 提取css文件
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash:8].css'
    }),
    // new HtmlWebpackPlugin() // 打包之后在build目录下会出现index.html,并且自动引入 js文件 
    // 如果需要指定build目录下的 index.html 是public 目录下的模版，可以继续配置
    new HtmlWebpackPlugin({
      template: './public/index.html', // 模版代码
      title: 'webpack 神奇之旅',
      favicon: './public/favicon.ico'
    })
  ],
  module: { // 用来处理各种后缀名不同的文件 ---- 万物皆模块
    rules: [
      {
        test: /\.css$/, // 找到以css结尾的文件
        use: loadUse('')
      },
      {
        test: /\.less$/, // 找到以less结尾的文件
        use: loadUse('less-loader')
      },
      {
        test: /\.scss$/, // 找到以scss结尾的文件
        use: loadUse('sass-loader')
      },
      {
        test: /\.stylus$/, // 找到以stylus结尾的文件
        use: loadUse('stylus-loader')
      }
    ]
  }
}